<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="box">
                <div class="appTitle">
                    <h3>食谱详情</h3>
                </div>
                <div class="appTop">
                    <span style="margin-left:16px; margin-right:25px">学校：{{school.schoolName}}</span>
                    <span>适用日期：{{school.suitTime}}</span>
                </div>
                <div v-for="(item,index) in school.recipeList" :key="index">
                    <div class="appTop">
                        <P>{{item.cookbookDetails.sWeekday}}</p>
                    </div>
                    <el-row class="recipe-list"> 
                        <el-col :span="8">
                            <el-col :span="14">
                                <div class="img-wrapper">
                                    <img src="../../assets/breakfirst.png" alt="早餐">
                                </div>
                            </el-col>
                            <el-col :span="10" class="recipe-eat">
                                <p>早餐：</p>                   
                                <p class="recipe-eatList">
                                    <span v-for="(item,index) in item.breakArray" :key="index">{{item?item:'暂无'}}</span>
                                </p>
                            </el-col>
                        </el-col>
                        <el-col :span="8">
                            <el-col :span="14">
                                <div class="img-wrapper">
                                    <img src="../../assets/lunch.png" alt="午餐">
                                </div>
                            </el-col>
                            <el-col :span="10" class="recipe-eat">
                                <p>午餐：</p>                   
                                <p class="recipe-eatList">
                                    <span v-for="(item,index) in item.lunchArray" :key="index">{{item?item:'暂无'}}</span>
                                </p>
                            </el-col>
                        </el-col>
                        <el-col :span="8">
                            <el-col :span="14">
                                <div class="img-wrapper">
                                    <img src="../../assets/dinner.png" alt="晚餐">
                                </div>
                            </el-col>
                            <el-col :span="10" class="recipe-eat">
                                <p>晚餐：</p>                   
                                <p class="recipe-eatList">
                                    <span v-for="(item,index) in item.dinnerArray" :key="index">{{item?item:'暂无'}}</span>
                                </p>
                            </el-col>
                        </el-col>
                    </el-row>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm()">返回</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import { getRecipeDetailByRecipeId, getRecipeDetailSuitTimeByRecipeId} from 'api/recipeManage';


export default {
    name: 'recipeDetail',
    components: { Levelbar },
    data() {
        return {
            school: {
                recipeId: this.$route.params.rId,
                // recipeId: '378170406713950208',
                schoolName: this.$route.params.sName,
                suitTime: null,
                recipeList: null
            }
        };
    },
    created() {
        // 根据食谱ID查询食谱详情  
        this.getRecipeListByRId();

        // 根据食谱ID获取食谱的适用时间
        this.getRecipeDetailSuitTime();
    },
    methods: {
    // 功能：根据食谱Id获取食谱列表
        getRecipeListByRId() {
            // 调用接口
            getRecipeDetailByRecipeId(this.school.recipeId).then(res => {
                // console.log(res);
                this.school.recipeList = res.data.content;
                // 分割早餐午餐晚餐
                for (let i = 0 ; i < this.school.recipeList.length ; i++) {
                    let item = this.school.recipeList[i].cookbookDetails;
                    let breakTemp = item.sBreakfastContent;
                    let lunchTemp = item.sLunchContent;
                    let dinnerTemp = item.sDinnerContent;
                    if (breakTemp=='' && lunchTemp == '' && dinnerTemp=='') {
                        // console.log(i);
                        this.school.recipeList.splice(i--, 1);
                    } else {  
                        this.school.recipeList[i].breakArray = breakTemp.split(',');
                        this.school.recipeList[i].lunchArray = lunchTemp.split(',');
                        this.school.recipeList[i].dinnerArray = dinnerTemp.split(',');
                    }
                }
                // console.log(this.school.recipeList);
            });
        },

        // 根据食谱Id获取食谱适用时间
        getRecipeDetailSuitTime() {
            getRecipeDetailSuitTimeByRecipeId(this.school.recipeId).then(res => {
                if (res.data.status == 200) {
                    if (res.data.content.length > 0) {
                        this.school.suitTime = res.data.content[0].suitTime;
                    }
                }
            });
        },
        // 返回上一页
        resetForm() {
            this.$router.go(-1);
        }
        

    }
}

</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .content {
    padding: 0 50px;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    background: #fff;

    .box {
      padding-bottom: 20px;
      background: #fff;

      .appTitle {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
      }

      .appTop {
        margin: 40px 0;
        font-size: 14px;
        color: #333;
        line-height: 14px;
        border-left: 4px solid #ff5e2c;
      }
      .appTop p {
        margin-left: 16px;
      }
    //   .appTop:before {
    //     content: "";
    //     float: left;
    //     border-radius: 2px;
    //     width: 4px;
    //     height: 15px;
    //     background: #ff5e2c;
    //     margin-top: 3px;
    //   }

      .img-wrapper {
        max-width: 283px;
        max-height: 170px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .recipe-list {
        // margin-top: 15px;
        padding-bottom: 20px;
        color: #666;
        margin-bottom: 45px;

        .recipe-eat {
          text-align: left;
          font-size: 14px;
          color: #666;

          .recipe-eatList {
            display: flex;
            font-size: 0;
            flex-wrap: wrap;

            span {
              display: inline-block;
              width: 50%;
              font-size: 14px;
              color: #666;
              padding:3px 0;
               word-break:break-all; 
            }
          }

          p:first-of-type {
            padding-bottom: 30px;
          }

          p:nth-of-type(2) {
            span:first-of-type {
              padding-right: 20px;
            }
          }
        }
      }
      .footer {
          //float: right;
          text-align: center;
          margin-top: 60px;
      }
    }
  }
}
</style>


